//待办任务
<template>
  <view>
    <view :style="{ height:statusBarHeight+'px' }"></view>
    <view class="title_container">
      <image class="back_img" src="../../static/icon_back.png" @click="naviBack"></image>
      <view class="title">待办任务</view>
    </view>
    <view class="item" v-for="(item ,index) in dataList" :key="index" @click="itemClick(item)">
      <view class="row_container">

        <view class="task_title">
          <image class="task_img" src="../../static/inspection/icon_task_item.png"></image>
          {{item.modelTaskName}}
        </view>

        <view class="status">{{statusList[item.dataState/10]}}</view>
      </view>
      <view class="row_container_bottom">
        <view class="task_date">{{'时间要求：'+item.gmtCreate}}</view>
        <view class="task_button">去执行</view>
      </view>

    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
  import {
    getTaskList
  } from '@/services/inspection'

  const statusBarHeight = ref(0)
  // 0 1 2 3
  const statusList = ref(["未开始", "进行中", "执行已完成", "检查完成"])
  // 列表数据
  const dataList = ref<any[]>([])
  // 当前页数
  const page = ref(1)
  // 总条数
  const total = ref(0)

  onLoad(() => {
    const systemInfo = uni.getSystemInfoSync()
    console.log(systemInfo)
    statusBarHeight.value = systemInfo.statusBarHeight | 20
    console.log(statusBarHeight.value)
    getData(true)
  })

  //下拉刷新
  onPullDownRefresh(() => {
    getData(true)
  })
  //上拉加载
  onReachBottom(() => {
    if (page.value > total.value) {
      uni.showToast({
        title: '已加载完全部',
        icon: 'none',
      })
      return
    }
    getData(false)
  })
  //获取列表数据
  const getData = (refresh : Boolean) => {
    if (refresh) {
      page.value = 1
    } else {
      page.value++
    }
    getTaskList({ page: page.value, rows: 10 }).then((res : any) => {
      console.log(res.list)
      uni.hideLoading()
      if (refresh) {
        //刷新逻辑
        dataList.value = res?.list
      } else {
        res?.list.forEach((item : any) => {
          dataList.value.push(item)
        })
      }
      // page.value = res?.pageTools.pageNo
      total.value = res?.pageTools.pageCount

    }).catch(e => {

    })
  }

  /**
   * 当前点击数据项
   */
  const itemClick = (item : any) => {
    uni.navigateTo({
      url: `/pagesMember/inspection/pendingtask_detail?id=${item.modelTaskId}`
    })
  }

  //自定义返回事件
  const naviBack = () => {
    console.log('back')
    uni.navigateBack()
  }
</script>

<style lang="scss">
  page {
    height: 100%;
    background: linear-gradient(180deg, #BAE2EA 0%, #F9FAFB 100%);
  }

  .title_container {
    height: 88rpx;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0rpx 15rpx;
    margin-bottom: 12rpx;
  }

  .title {
    flex-grow: 1;
    color: #1C253A;
    font-weight: 500;
    font-size: 36rpx;
    text-align: center;
  }

  .back {
    font-size: 30rpx;
  }

  .back_img {
    width: 40rpx;
    height: 40rpx;
  }



  .item {
    background-color: white;
    border-radius: 16rpx;
    padding: 24rpx 16rpx;
    color: #1C253A;
    margin-left: 30rpx;
    margin-right: 30rpx;
    margin-top: 20rpx;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(209, 227, 230, 0.58);

  }

  .row_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

  }

  .row_container_bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 50rpx;
  }


  .task_title {
    height: 66rpx;
    line-height: 66rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #394259;
    text-align: left;
    margin-right: 16rpx;
    font-style: normal;
    text-transform: none;
    flex: 1;
    /* 占据剩余空间 */
    min-width: 0;
    /* 关键！允许内容收缩 */
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
  }

  .task_img {
    width: 66rpx;
    height: 66rpx;
  }

  .task_date {

    font-size: 30rpx;
    margin-left: 8rpx;
    color: #888E98;
    line-height: 44rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .status {
    height: 56rpx;
    line-height: 56rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #E02020;
    text-align: right;
    font-style: normal;
    text-transform: none;
  }

  .task_button {
    width: 132rpx;
    height: 62rpx;
    font-size: 28rpx;
    line-height: 62rpx;
    text-align: center;
    background: #54B9CC;
    color: white;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
  }
</style>
